<template>
	<div class="yh_content foSi14">
		<div class="tback">
			<el-button type="primary" @click="back">返回列表</el-button>
		</div>
		<el-form ref="form" :model="form" :rules="rules">
			<div class="contents">
				<div class="small_title">会员信息</div>
				<div class="forms">
					<div class="forms_item3 wid100" style="flex-direction: column;margin-bottom: 0;">
						<div class="dis disAl">
							<div class="left_title mar-right20" style="width: 140px;"><span
									style="color:red;margin-right:2px">*</span>选择会员或访客</div>
							<el-form-item class="mp0" prop="member_id">
								<el-select v-model="form.member_id" filterable placeholder="姓名/手机号"
									@change="searchmemberChange" style="width: 200px;" filterable remote
									:remote-method="remoteMethod" :loading="loading" size="small">
									<el-option v-if="searchmember_options.length>0"
										v-for="(item,index) in searchmember_options" :key="index"
										:label="item.realname + ' /'+item.tel" :value="item.id" />
								</el-select>
							</el-form-item>
						</div>
						<div v-if="Object.keys(memberinfo).length > 0" class="dis disAl mar-top10"
							style="border: 1px dashed #ccc;padding: 10px;margin-left: 160px;">
							<div>姓名：{{memberinfo.realname}}</div>
							<div class="mar-left20">性别：{{memberinfo.sex}}</div>
							<div class="mar-left20">手机：{{memberinfo.tel}}</div>
						</div>
					</div>
				</div>
				<div class="small_title">卡信息</div>
				<div class="forms">
					<div class="forms_item" style="margin-bottom: 0px">
						<div class="left_title"><span style="color:red;margin-right:2px">*</span>卡名称</div>
						<div class="dis disAl">
							<el-select v-model="form.product_id" @change="cardMembershipChange" style="width: 140px;"
								filterable placeholder="选择会员卡" size="small">
								<el-option v-for="(item,index) in cardMembership_options" :key="index"
									:label="item.name" :value="item.id" />
							</el-select>
							<div v-if="Object.keys(cardMembership).length > 0" class="mar-left10 mar-right10">
								{{cardMembership.sell_price}}元</div>
						</div>
					</div>
					<div class="forms_item" style="margin-bottom: 0px">
						<div class="left_title"><span style="color:red;margin-right:2px">*</span>卡号</div>
						<el-form-item class="mp0" prop="card_number">
							<el-input v-model="form.card_number" style="width: 140px;" size="small"
								placeholder="会员卡号" />
						</el-form-item>
					</div>
<!--					<div class="forms_item" style="width: 100%;margin-top: 0px">-->
<!--						<div class="left_title mar-left5 " style="color: #707070;font-size: 12px">-->
<!--							卡说明:自开卡之日起有效期60天，不限制请假次数及天数:自发卡之日10天内未开卡则自动开卡。</div>-->
<!--					</div>-->
					<div class="forms_item" style="width: 100%;margin-top: 0px;padding: 15px 0px 10px 20px">
						<el-checkbox v-model="form.old_cards">补录老卡</el-checkbox>
					</div>
					<div v-show="form.old_cards" class="forms_item">
						<div class="left_title"><span style="color:red;margin-right:2px">*</span>开卡时间</div>
						<div style="display:flex;align-items: center;">
							<el-date-picker v-model="form.cards_activate" style="width: 140px; margin-left: 5px"
								size="small" type="date" placeholder="开卡时间" />
						</div>
					</div>
					<div v-show="form.old_cards" class="forms_item">
						<div class="left_title"><span style="color:red;margin-right:2px">*</span>有效期至</div>
						<div class="dis disAl">
							<el-form-item class="mp0" prop="cards_period">
								<el-date-picker v-model="form.cards_period" style="width: 140px; margin-left: 5px"
									size="small" type="date" placeholder="有效期至" />
							</el-form-item>
						</div>
					</div>
					<div v-show="form.old_cards" class="forms_item">
						<div class="left_title">发卡时间</div>
						<div class="dis disAl">
							<el-date-picker v-model="form.cards_hairpin" style="width: 140px; margin-left: 5px"
								size="small" type="date" placeholder="发卡时间" />
						</div>
					</div>
					<div v-show="form.old_cards" class="wid100 disAl forms_item3">
						<div style="width: 15%;">历史请假情况：</div>
						<div class="wid85">
							<div class="dis disAl">
								<div class="dis disAl mar-top5">
									<div>已经请假</div>
									<el-form-item class="mp0" prop="cards_leave_num">
										<el-input v-model="form.cards_leave_num" style="width: 80px;margin: 0px 10px"
											size="small" />
									</el-form-item>
									<div>次，共</div>
									<el-form-item class="mp0" prop="cards_leave_day">
										<el-input v-model="form.cards_leave_day" style="width: 80px;margin: 0px 10px"
											size="small" />
									</el-form-item>
									<div>天</div>
								</div>
							</div>
							<div class="foSi12 mar-top10" style="color: #474747">
								说明:历史请假状态可以不填，如果馆里有限制会员卡有效期的请假次数，建议填写。如果会员卡目前请假，建议销假后再录入。</div>
						</div>
					</div>
					<div class="wid100 forms_item3 disAl" style="padding:10px 10px 10px 10px;">
						<div class="left_title" style="width: 160px;"><span
								style="color:red;margin-right:2px">*</span>开卡</div>
						<div class="dis disAl">
							<div class="dis disAl cuPo hei32">
								<div class="dis disAl disJuC bacFFF borRad50" @click.stop="form.activate_card = 1"
									style="width: 18px;height: 18px;border: 1px solid #41c3a8;">
									<div v-if="form.activate_card === 1" class="borRad50"
										style="width: 8px;height: 8px;background: #41c3a8;"></div>
								</div>
								<div class="mar-left5">立即开卡</div>
							</div>
							<div class="dis disAl cuPo mar-left30 hei32">
								<div class="dis disAl disJuC bacFFF borRad50" @click.stop="form.activate_card = 2"
									style="width: 18px;height: 18px;border: 1px solid #41c3a8;">
									<div v-if="form.activate_card === 2" class="borRad50"
										style="width: 8px;height: 8px;background: #41c3a8;"></div>
								</div>
								<div class="mar-left5">第一次预约开卡</div>
							</div>
							<div class="dis disAl cuPo mar-left30 hei32">
								<div class="dis disAl disJuC bacFFF borRad50" @click.stop="form.activate_card = 3"
									style="width: 18px;height: 18px;border: 1px solid #41c3a8;">
									<div v-if="form.activate_card === 3" class="borRad50"
										style="width: 8px;height: 8px;background: #41c3a8;"></div>
								</div>
								<div class="mar-left5 mar-right5">特定时间开卡</div>
								<el-form-item class="mp0" prop="activate_card_time">
									<el-date-picker v-if="form.activate_card === 3" v-model="form.activate_card_time"
										style="width: 140px; margin-left: 5px" size="small" type="date"
										placeholder="请选择日期" />
								</el-form-item>
							</div>
						</div>
					</div>
					<div class="forms_item3 wid100" style="flex-direction: column">
						<div class="dis disAl">
							<div class="left_title mar-right20" style="width: 140px;">推荐办卡人</div>
							<el-autocomplete v-model="form.staff_id" :fetch-suggestions="remoteMethod1"
								placeholder="姓名/手机号" @select="staffChange" style="width: 200px;"></el-autocomplete>
						</div>
						<div v-if="Object.keys(staff).length > 0" class="dis disAl mar-top10"
							style="border: 1px dashed #ccc;padding: 10px;margin-left: 160px;">
							<el-popover placement="top-start" title="推荐办卡人" width="400" trigger="click"
								content="可以是员工或者是会员。如果是一个陌生人，直接输入姓名即可。编辑会员卡时可再次编辑。">
								<i slot="reference" class="el-icon-question wenhao mar-right5" />
							</el-popover>
							<div>姓名：{{staff.name}}</div>
							<div class="mar-left20">性别：{{staff.sex === 1?'男':'女'}}</div>
							<div class="mar-left20">手机：{{staff.mobile}}</div>
						</div>
						<div v-else class="dis disAl mar-top10"
							style="border: 1px dashed #ccc;padding: 10px;margin-left: 160px;">
							<el-popover placement="top-start" title="推荐办卡人" width="400" trigger="click"
								content="可以是员工或者是会员。如果是一个陌生人，直接输入姓名即可。编辑会员卡时可再次编辑。">
								<i slot="reference" class="el-icon-question wenhao mar-right5" />
							</el-popover>
							<div class="dis disAl">
								<div>推荐人</div>
								<div class="mar-left10"><el-tag type="warning">陌生人</el-tag></div>
							</div>
							<div v-if="form.staff_id" class="mar-left10">{{form.staff_id}}</div>
						</div>
					</div>
				</div>
				<div class="small_title">收费信息</div>
				<div class="forms">
					<div class="forms_item disAl" style="margin-bottom: 0px;padding: 15px">
						<div class="left_title">卡售价(元)</div>
						<div>{{cardMembership.sell_price}}</div>
					</div>
					<div class="forms_item disAl" style="margin-bottom: 0px;padding: 15px">
						<div v-if="cardMembership.card_type !== 1" class="left_title">卡额度({{cardMembership.card_type===2?'次':'元'}})</div>
						<div v-if="cardMembership.card_type !== 1">{{cardMembership.card_money}}</div>
					</div>
					<div class="forms_item mar-top10" style="margin-bottom: 0px;">
						<div v-if="cardMembership.card_type !== 3" class="left_title">优惠活动({{cardMembership.card_type===2?'次':'元'}})</div>
						<div v-if="cardMembership.card_type !== 3" class="dis disAl">
							<div class="foSi14 mar-right5" style="width: 50px;text-align: right">加赠</div>
							<el-form-item class="mp0" prop="charge_card_activity_num">
								<el-input v-model="form.charge_card_activity_num" size="small" style="width: 85px;" />
							</el-form-item>
						</div>
					</div>
					<div class="forms_item mar-top10" style="margin-bottom: 0px;">
						<div v-if="cardMembership.card_type !== 1" class="left_title"><span
								style="color:red;margin-right:2px">*</span>实际余额({{cardMembership.card_type===2?'次':'元'}})</div>
						<div v-if="cardMembership.card_type !== 1" class="dis disAl">
							<el-form-item class="mp0" prop="charge_card_balance">
								<el-input v-model="form.charge_card_balance" style="width: 140px;" size="small"
									placeholder="请输入余额" />
							</el-form-item>
						</div>
					</div>
					<div class="forms_item mar-top10" style="margin-bottom: 0px;">
						<div class="left_title">赠送积分数(分)</div>
						<el-form-item class="mp0" prop="charge_card_give_integral">
							<el-input v-model="form.charge_card_give_integral" style="width: 140px;" size="small"
								placeholder="请输入积分" />
						</el-form-item>
					</div>
					<div class="forms_item mar-top10" style="margin-bottom: 0px;">
						<div class="left_title">付款方式</div>
						<el-form-item class="mp0" prop="charge_card_paytype">
							<el-select v-model="form.charge_card_paytype" style="width: 140px;" placeholder="请选择"
								size="small" @change="paytypeChange">
								<el-option v-for="item in paytypelist" :key="item.value" :label="item.label"
									:value="item.value" />
							</el-select>
						</el-form-item>
					</div>
					<div class="forms_item mar-top10" style="margin-bottom: 0px;">
						<div class="left_title">请客卡</div>
						<div class="dis disAl">
							<el-select v-model="form.charge_card_coupon" @change="coupon" style="width: 140px;" placeholder="请选择"
								size="small">
								<el-option v-for="item in couponlist" :key="item.id" :label="item.couponname"
									:value="item.id" />
							</el-select>
						</div>
					</div>
					<div class="forms_item mar-top10" style="margin-bottom: 0px;" />
					<div class="forms_item mar-top10" style="margin-bottom: 0px;">
						<div class="left_title"><span style="color:red;margin-right:2px">*</span>实收金额(元)</div>
						<el-form-item class="mp0" prop="charge_card_receipts_money">
							<el-input v-model="form.charge_card_receipts_money" style="width: 140px;" size="small"
								placeholder="请输入金额" />
						</el-form-item>
					</div>
					<div class="forms_item mar-top10" style="margin-bottom: 0px;" />
					<div v-if="form.charge_card_coupon === 4" class="forms_item mar-top10" style="margin-bottom: 0px;">
						<div class="left_title"><span style="color:red;margin-right:2px">*</span>储值卡支付金额（元）</div>
						<div class="dis disAl">
							<el-input v-model="form.charge_card_stored_money" style="width: 140px;" size="small"
								placeholder="请输入金额" />
						</div>
					</div>
					<div v-if="form.charge_card_coupon === 4" class="forms_item mar-top10" style="margin-bottom: 0px;">
						<div class="left_title"><span style="color:red;margin-right:2px">*</span>储值卡选择</div>
						<el-form-item class="mp0" prop="charge_card_stored_id">
							<el-select v-model="form.charge_card_stored_money" style="width: 140px;"
								placeholder="姓名/手机号/卡号" size="small">
								<el-option v-for="(item,index) in cardStoredsList" :key="index" :label="item.name"
									:value="item.id" />
							</el-select>
						</el-form-item>
					</div>
					<div class="wid100 forms_item3 disAl disJuB mar-top10" style="padding:10px 10px 10px 10px;">
						<div class="left_title">备注</div>
						<div><el-input v-model="form.notes" type="textarea" style="min-width:720px;" maxlength="100000"
								:rows="5" placeholder="请输入备注" /> </div>
					</div>
				</div>
				<div class="buttom_btns">
					<div class="save">
						<el-button type="primary" @click.stop="submitForm('form')">保存</el-button>
					</div>
					<div class="nosave">
						<el-button type="info" @click="back">取消</el-button>
					</div>
				</div>
			</div>
		</el-form>
	</div>
</template>

<script>
	import {
		getXuan
	} from '@/utils/limits.js'
	import {
		mapGetters
	} from 'vuex' // Secondary package based on el-pagination
	import {
		cardSearch,
		cardSearch1,
		searchLists,
		cardStoredList,
		memberHairpin,
    couponStoredList
	} from '@/api/member'
  import {
    featuresSetting
  } from '@/api/system'
	export default {
		name: 'ArticleList',
		components: {},
		filters: {
			statusFilter(status) {
				const statusMap = {
					published: 'success',
					draft: 'info',
					deleted: 'danger'
				}
				return statusMap[status]
			}
		},
		data() {
			const cardsActivate = (rule, value, callback) => {
				if (this.form.old_cards && !value) {
					callback(new Error('请输入1~100内正整数'))
				} else {
					callback()
				}
			}
			const cardsLeave = (rule, value, callback) => {
				if (this.form.old_cards) {
					if (!parseFloat(value) || value < 0) {
						callback(new Error('请输入正整数'))
					} else {
						callback()
					}
				} else {
					callback()
				}
			}
			const cardActivate = (rule, value, callback) => {
				if (this.form.activate_card === 3 && !this.form.activate_card_time) {
					callback(new Error('请选择日期'))
				} else {
					callback()
				}
			}
			const cardActivity = (rule, value, callback) => {
				if (Number(value) === 0) {
					callback()
				} else if (!parseFloat(value) || value % 1 !== 0 || value < 0) {
					callback(new Error('请输入整数'))
				} else {
					callback()
				}
			}
			const cardBalance = (rule, value, callback) => {
				var len = 0
				if (value) {
					var tem = value.toString().split('.')
					len = tem.length >= 2 ? tem[1].length : 0;
				}
				if (Number(value) === 0 || this.cardMembership.card_type === 1) {
					callback()
				} else if (!parseFloat(value) || value % 1 !== 0 || value < 0 || len > 1) {
					callback(new Error('请输入余额（支持一位小数）'))
				} else {
					callback()
				}
			}
			const cardIntegral = (rule, value, callback) => {
				if (!value) {
					callback()
				} else if (!parseFloat(value) || value % 1 !== 0 || value < 0 || value > 10000000) {
					callback(new Error('请输入1-10000000之间的正整数或留空'))
				} else {
					callback()
				}
			}
			const cardPaytype = (rule, value, callback) => {
				if (value === 0) {
					callback(new Error('请选择付款方式'))
				} else {
					callback()
				}
			}
			const cardReceipts = (rule, value, callback) => {
				var len = 0
				if (value) {
					var tem = value.toString().split('.')
					len = tem.length >= 2 ? tem[1].length : 0;
				}
				if (Number(value) === 0) {
					callback()
				} else if (!parseFloat(value) || value < 0 || len > 2) {
					callback(new Error('请输入金额'))
				} else {
					callback()
				}
			}

			return {
				list: null,
				total: 0,
				listLoading: false,
				search: {
					membership: []
				},
				form: {
					notes: '',
					gender: 1,
					city: '',
					card_number: '',
					old_cards: false, // 是否开启补录老卡
					cards_activate: '', // 补录老卡->开卡时间
					cards_period: '', // 补录老卡->截至时间
					cards_hairpin: '', // 补录老卡->发卡时间
					cards_leave_num: null,
					cards_leave_day: null,
					activate_card: 1,
					activate_card_time: null,
					staff_id: null,
					charge_card_balance: null,
					charge_card_give_integral: null,
					charge_card_paytype: 0, // 支付方式
					charge_card_coupon: 0, // 优惠券ID
					charge_card_receipts_money: null,
					charge_card_stored_id: null,
					charge_card_stored_money: null,
					a: '',
					member_id: null, // 搜索会员选择的id
					product_id: null, // 搜索会员卡选择的id
					charge_card_activity_num: null,
				},
				rules: {
					charge_card_receipts_money: [{
						required: true,
						trigger: 'change',
						validator: cardReceipts
					}],
					charge_card_paytype: [{
						required: true,
						trigger: 'change',
						validator: cardPaytype
					}],
					charge_card_give_integral: [{
						required: true,
						trigger: 'change',
						validator: cardIntegral
					}],
					charge_card_balance: [{
						required: true,
						trigger: 'change',
						validator: cardBalance
					}],
					charge_card_activity_num: [{
						required: true,
						trigger: 'change',
						validator: cardActivity
					}],
					activate_card_time: [{
						required: true,
						trigger: 'change',
						validator: cardActivate
					}],
					member_id: [{
						required: true,
						message: '请选择会员或访客',
						trigger: 'change'
					}],
					card_number: [{
						required: true,
						message: '请输入1~16位卡号',
						trigger: 'blur'
					}],
					cards_period: [{
						required: true,
						trigger: 'change',
						validator: cardsActivate
					}],
					cards_leave_num: [{
						required: true,
						trigger: 'change',
						validator: cardsLeave
					}],
					cards_leave_day: [{
						required: true,
						trigger: 'change',
						validator: cardsLeave
					}],
				},
				listQuery: {
					page: 1,
					limit: 20
				},
				paytypelist: [ // 支付方式
					{
						label: '请选择',
						value: 0
					}, {
						label: '商户扫码(微信/支付宝/云闪付)',
						value: 1
					}, {
						label: '用户扫码(收付款)',
						value: 2
					}, {
						label: '现金支付',
						value: 3
					}, {
						label: '储值卡支付',
						value: 4
					}, {
						label: '线下支付(银行卡)',
						value: 5
					}, {
						label: '线下支付(微信)',
						value: 6
					}, {
						label: '线下支付(支付宝)',
						value: 7
					}, {
						label: '线下支付(其他)',
						value: 8
					}
				],
				couponlist: [], //优惠券列表
				// 防止重复提交
				loading: false,
				memberinfo: {}, // 所选会员
				staff: {},
				searchmember_options: [], // 搜索会员列表
				cardMembership_options: [], //会员卡列表
				cardMembership: {}, // 所选会员卡
				staff_options: [], //推荐办卡人列表
				cardStoredsList: [], //储值卡列表
				id: ''
			}
		},
		computed: {
			...mapGetters([
				'permission_routes',
				'roles'
			])
		},
		created() {
			var xuanList = [{
				name: '新发卡',
				url: '/member/memberaddnewcard',
				pd: true
			}]
			var xuanList1 = getXuan(xuanList, this.roles)
			this.$store.dispatch('user/changeXuan', {
				key: 'xuanList',
				value: xuanList1
			})
			this.$store.dispatch('user/changeXuan', {
				key: 'xuan',
				value: 0
			})
			this.getSousuo()
			this.getMeberId()
			// this.getList();
      this.featuresSetting()
		},
		methods: {
      featuresSetting(){
        featuresSetting().then(response => {
          const {
            data
          } = response
          this.form.activate_card = data.open_card
        });
      },
      coupon(e){
        console.log("选中城市id:", e);
        // console.log("选中城市id:", this.form.charge_card_coupon);
        this.couponlist.forEach(item => {
          if (e === item.id) {
            console.log(item);
            if(this.form.charge_card_receipts_money - item.money <0){
              this.form.charge_card_receipts_money = 0;
            }else {
              this.form.charge_card_receipts_money = this.form.charge_card_receipts_money - item.money;
            }
            return
          }
        })
      },
      getCoupon(){

        couponStoredList({
          id: this.form.member_id,
          card_id: this.cardMembership.id,
          card_money: this.form.charge_card_receipts_money
        }).then(response => {
          const {
            data
          } = response
          this.couponlist = data
        })
      },
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						var data = {
							is_experience: this.cardMembership.is_experience,
							product_id: this.form.product_id,
							member_id: this.form.member_id,
							card_number: this.form.card_number,
							old_cards: this.form.old_cards ? 1 : 0,
							cards_activate: this.form.cards_activate,
							cards_period: this.form.cards_period,
							cards_hairpin: this.form.cards_hairpin,
							cards_leave_num: this.form.cards_leave_num,
							cards_leave_day: this.form.cards_leave_day,
							activate_card: this.form.activate_card,
							activate_card_time: this.form.activate_card_time,
							staff_id: this.staff?this.staff.id:0,
							staff_name: this.form.staff_id,
							charge_card_sell_price: this.cardMembership.sell_price,
							charge_card_limit: this.cardMembership.card_money,
							charge_card_activity_num: this.form.charge_card_activity_num,
							charge_card_balance: this.form.charge_card_balance,
							charge_card_give_integral: this.form.charge_card_give_integral,
							charge_card_paytype: this.form.charge_card_paytype,
							charge_card_coupon: this.form.charge_card_coupon,
							charge_card_receipts_money: this.form.charge_card_receipts_money,
							charge_card_stored_id: this.form.charge_card_stored_id,
							charge_card_stored_money: this.form.charge_card_stored_money,
							notes: this.form.notes
						}
						memberHairpin(data).then(response => {
							this.back()
						}).catch(error => {
							console.log(error)
						})
					} else {
						this.$message.error('请按规则填写完整信息')
						return false
					}
				})
			},
			getMeberId() {
				// 创建一个 Date 对象
				var today = new Date();
				// 获取年、月、日、时、分、秒
				var year = today.getFullYear();
				var month = today.getMonth() + 1; // 月份是从 0 开始计数的，需要加1
				var day = today.getDate();
				var hours = today.getHours();
				var minutes = today.getMinutes();
				var seconds = today.getSeconds();
				this.form.card_number = year + (month < 10 ? "0" : "") + month + (day < 10 ? "0" : "") + day +
					(hours < 10 ? "0" : "") + hours + (minutes < 10 ? "0" : "") + minutes
				this.form.cards_activate = year + '-' + (month < 10 ? "0" : "") + month + '-' + (day < 10 ? "0" : "") + day
			},

			remoteMethod3() {
				cardStoredList({
					id: this.form.member_id
				}).then(response => {
					const {
						data
					} = response
					this.cardStoredsList = data
				})
			},
			getSousuo() {
				searchLists({
					name: '',
					card_is_experience: 0
				}).then(response => {
					const {
						data
					} = response
					this.cardMembership_options = data
					if (data.length > 0) {
						this.form.product_id = this.cardMembership_options[0].id
						this.cardMembership = this.cardMembership_options[0]
						this.form.charge_card_receipts_money = this.cardMembership_options[0].sell_price
						this.form.charge_card_balance = this.cardMembership_options[0].card_money
						if (this.cardMembership.card_give_integral_type === 2) {
							this.form.charge_card_give_integral = this.cardMembership_options[0]
								.card_give_integral_num
						}
            // this.coupon()
					}
				})
			},
			paytypeChange(e) {
				if (this.form.charge_card_paytype === 4) {
					this.form.charge_card_stored_money = this.cardMembership.sell_price
					this.form.charge_card_receipts_money = 0
				} else if (this.form.charge_card_stored_money) {
					this.form.charge_card_receipts_money = this.cardMembership.sell_price
					this.form.charge_card_stored_money = null
					this.form.charge_card_stored_id = null
				}
			},
			searchmemberChange(e) {
				this.searchmember_options.forEach(item => {
					if (e === item.id) {
						this.memberinfo = item
						this.remoteMethod3()
						return
					}
				})
        this.form.product_id = 0;
        this.form.charge_card_coupon = 0;
        this.form.charge_card_receipts_money = 0;
        this.getCoupon()
			},
			cardMembershipChange(e) {
				this.cardMembership_options.forEach(item => {
					if (e === item.id) {
						this.cardMembership = item
						this.form.charge_card_receipts_money = item.sell_price
						this.form.charge_card_balance = item.card_money
						if (this.cardMembership.card_give_integral_type === 2) {
							this.form.charge_card_give_integral = item.card_give_integral_num
						}
						return
					}
				})
        this.form.charge_card_coupon = 0;
        this.getCoupon();
			},
			staffChange(e) {
				console.log(e)
				this.form.staff_id = e.item.name
				this.staff = e.item
			},
			remoteMethod1(queryString, cb) {
				console.log(queryString)
				this.staff = {}
				cardSearch1({
					keyword: queryString
				}).then(response => {
					const {
						data
					} = response
					this.staff_options = data.map((terminal) => {
						return {
							value: terminal.name + ' / ' + (terminal.gender === 1?'男':'女') + ' / ' + terminal.mobile,
							item: terminal,
						};
					});
					cb(this.staff_options);
				})
			},
			remoteMethod(query) {
				if (query !== '') {
					this.loading = true
					cardSearch({
						keyword: query
					}).then(response => {
						const {
							data
						} = response
						this.searchmember_options = data
						this.loading = false
					}).catch(error => {
						console.log(error)
						this.loading = false
					})
				} else {
					this.searchmember_options = []
				}
			},
			handleChange(e) {

			},
			closeCropper() {
				this.dialogVisible = !this.dialogVisible
			},
			finish() {
				// 确认裁剪
			},
			back() {
				this.$router.go(-1)
			},
			// getList() {
			//   this.listLoading = true;
			//   fetchList(this.listQuery).then((response) => {
			//     this.list = response.data.items;
			//     this.total = response.data.total;
			//     this.listLoading = false;
			//   });
			// }
			submitUpload() {
				this.$refs.upload.submit()
			},
			handleRemove(file, fileList) {
				console.log(file, fileList)
			},
			handlePreview(file) {
				console.log(file)
			}
		}
	}
</script>

<style scoped>
	.yh_content {
		padding: 20px;
	}

	.contents {
		width: 860px;
		margin: 0px auto;
		padding: 10px
	}

	.yh_topsearch {
		border: 1px solid #ccc;
		padding: 20rpx;

	}

	.yh_dis {
		display: flex;
	}

	.yh_disAlc {
		align-items: center;
	}

	.touxiang {
		width: 70px;
		height: 70px;
		border-radius: 10px;
	}

	.thead {
		display: flex;
		align-items: center;
	}

	.small_title {
		font-size: 13px;
		color: #7c7c7c;
		margin-top: 20px;
		margin-bottom: 10px;
	}

	.forms {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.forms_item {
		width: 49.9%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: #ededed;
		padding: 5px 5px 5px 10px;
		margin-bottom: 10px
	}

	.forms_item3 {
		display: flex;
		background: #ededed;
		padding: 5px 5px 5px 10px;
		margin-bottom: 10px
	}

	.left_title {
		letter-spacing: 2px;
		font-size: 14px
	}

	.buttom_btns {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 50%;
		margin: 0px auto;
		margin-top: 50px;
		margin-bottom: 50px
	}

	.save {
		margin-right: 30px
	}

	.tback {
		display: flex;
		justify-content: right;
		width: 90%;
		margin: 0px auto;
	}

	::v-deep .el-checkbox__input.is-checked .el-checkbox__inner {
		background-color: #41c3a8;
		border-color: #41c3a8;
	}

	::v-deep .el-checkbox__input.is-indeterminate .el-checkbox__inner {
		background-color: #ffffff;
		border-color: #DCDFE6;
	}

	::v-deep .el-checkbox__inner:hover {
		border-color: #DCDFE6;
	}

	::v-deep .el-checkbox__input.is-focus .el-checkbox__inner {
		border-color: #DCDFE6;
	}

	::v-deep .el-checkbox__input.is-checked+.el-checkbox__label {
		color: #606266;
	}

	::v-deep .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner::after {
		border-color: #fdfeff;
	}
</style>
